<template>
  <div class="heroSmallCard" @click="clickCard(data)">
    <div>
      <el-avatar :size="60" :src="'https:' + data.avatar"></el-avatar>
    </div>
    <div class="heroName">
      {{ data.name }}
    </div>
  </div>
</template>
<script>
export default {
  name: "heroSmallCard",
  props: {
    data: {
      type: Object,
      default() {
        return {}
      }
    },
    clickCard: {
      type: Function,
      default() {
        return null
      }
    }
  }
}
</script>
<style scoped>
.heroSmallCard {
  border-radius: 10px;
  background-color: rgba(78,110,242, 0.3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding:10px;
  cursor: pointer;
  transition: all 0.5s;
}
.heroSmallCard:hover {
  background-color: rgba(78,110,242, 0.6);
  transform: translateY(-10px);
}
.heroName {
  margin-top: 10px;
}
</style>
